<template>
	<uni-popup ref="loginPopup" @change="popupChange" :is-mask-click="false">
		<view class="popup_content">
			<view class="box">
				<view class="popLogo">
					<image mode="widthFix" src="/static/logo.png"></image>
				</view>
				<checkbox-group @change="checkChange">
					<label class="checkLabel">
						<view>
							<checkbox value="agree" :checked="check === 'agree'" backgroundColor="#FFFFFF" borderColor="#016024"
								color="#016024" style="transform:scale(0.8)" />
						</view>
						<view>
							<text>若您的手机号未注册，登录时将自动注册！且代表您同意</text>
							<text style="color: #016024;font-weight: bold;" @click.stop="toServiceAgreement">《硒乡坊服务协议》</text>
							<text>和</text>
							<text style="color: #016024;font-weight: bold;" @click.stop="toPrivacyPolicy">《硒乡坊隐私政策》</text>
							<text>。</text>
						</view>
					</label>
				</checkbox-group>

				<view class="btns">
					<view class="msg">{{msg}}</view>
					<button size="default" type="default" class="btnDefault" hover-class="btnHover" :disabled="check !== 'agree'"
						open-type="getPhoneNumber" @getphonenumber="getMobile">
						授权获取微信手机号
					</button>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import mixins from '@/common/mixins.js';
	export default {
		props: {},
		mixins: [mixins],
		data() {
			return {
				check: '',
				msg: ''
			};
		},
		methods: {
			popupOpen(e) {
				console.log("popupOpen: ", e);
				this.$refs.loginPopup.open("center");
			},
			popupClose() {
				this.$refs.loginPopup.close();
			},
			popupChange(e) {
				this.$emit('loginChange', e);
			},
			checkChange(e) {
				this.check = e.detail.value[0];
				if (this.check === 'agree') {
					this.msg = '';
				} else {
					this.msg = '请勾选同意服务协议和隐私政策！';
				}
			},
			async getMobile(e) {
				console.log("getMobile: ", e);
				if (this.check !== 'agree') {
					this.msg = '请勾选同意服务协议和隐私政策！';
					return;
				}
				// 用户拒绝授权"getPhoneNumber:fail user deny"
				if (e.detail.errMsg === 'getPhoneNumber:fail user deny') {
					this.msg = '若您拒绝申请，将无法使用‘硒乡坊’！';
					return;
				} else {
					const phone = await this.decryptPhoneNumber(e);
					if (phone) {
						const updateRes = await this.$uniCloudCallFunction({
							name: "xxf-user",
							action: "updateUser",
							data: {
								uid: this.$store.state.login.uid,
								mobile: phone,
							}
						});
						console.log("updateRes: ", updateRes);
						if (updateRes) {
							this.$store.commit("login/setLoginInfo", {
								mobile: phone,
							});
						} else {
							console.log("云端更新发生错误！");
							return;
						}
					} else {
						console.log("解密发生错误！");
						return;
					}
					this.$emit('loginConfirm');
					this.popupClose();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popup_content {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		.box {
			width: 85%;
			background: #ffffff;
			border-radius: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.popLogo {
				margin-top: 30rpx;

				>image {
					width: 288rpx;
					height: 288rpx;
				}
			}

			.checkLabel {
				padding: 0 30rpx;
				width: calc(100% - 60rpx);
				display: flex;
				flex-direction: row;

				>view {
					font-weight: 400;
					font-size: 28rpx;
					color: $uni-main-color;
				}
			}


			.btns {
				margin-bottom: 30rpx;
				padding: 30rpx;
				width: calc(100% - 60rpx);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.msg {
					width: 100%;
					height: 36rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: $xxf-red;
					text-align: center;
				}

				.btnDefault {
					width: 80%;
					height: 76rpx;
					background: $xxf-red;
					box-shadow: none;
					border-radius: 38rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>